<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import { getEngineeringDataInquiryColumns } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';

const topTableRef = ref(null);
const searchParams = ref({
  prodId: null,
  techId: null
});
const topColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'miName',
    dataIndex: 'miName',
    title: '项目名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'miData',
    dataIndex: 'miData',
    title: '数据项',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '编写',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '编写日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '最后修改日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  }
];

const bottomTableRef = ref(null);
const bottomColumn = ref([]);

function getData(params) {
  searchParams.value = params;
  nextTick(() => {
    topTableRef.value.getData(1);
    bottomTableRef.value.getData(1);
    getEngineeringDataInquiryColumns({
      techId: params.techId
    }).then(({ data, error }) => {
      if (!error && data.length) {
        console.log('data', data);
        const column = data.map(item => {
          return {
            key: item.fieldName,
            dataIndex: item.fieldName,
            title: item.caption,
            align: 'center',
            checked: true,
            ellipsis: true,
            width: 130
          };
        });
        bottomColumn.value = [
          {
            key: 'dataIndex',
            dataIndex: 'dataIndex',
            title: '序号',
            width: 70,
            align: 'center',
            checked: true,
            ellipsis: true
          },
          ...column
        ];
      } else {
        bottomColumn.value = [];
      }
    });
  });
}

const topClassName = computed(() => {
  if (!bottomColumn.value.length) {
    return 'h-full';
  }
  return 'mb-1% h-49.5%';
});

// function getLoadSucess(){
//   const
// }

defineExpose({
  getData
});
</script>

<template>
  <div class="h-full w-full">
    <div :class="topClassName">
      <Table
        ref="topTableRef"
        v-model:searchParams="searchParams"
        class="h-full"
        :column="topColumn"
        :show-row-selection="false"
        row-key="id"
        :scroll="{ y: 'auto' }"
        :is-init-get-data="false"
        url="/erpsyncmes/Mi/findMiData"
        :auto-generate-uuid="true"
        :is-pagination="false"
      >
        <template #title><span class="color-#646cff">工程指示</span></template>
      </Table>
    </div>
    <div v-show="bottomColumn.length" class="h-49.5%">
      <Table
        ref="bottomTableRef"
        v-model:searchParams="searchParams"
        class="h-full"
        :column="bottomColumn"
        :show-row-selection="false"
        row-key="id"
        :scroll="{ y: 'auto' }"
        :is-init-get-data="false"
        url="/erpsyncmes/Mi/findMiData2"
        :auto-generate-uuid="true"
        :is-pagination="false"
      >
        <template #title><span class="color-#646cff">工程数据</span></template>
      </Table>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
